<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 800px;
				height: 500px;
				border: 1px solid blue;
				margin: 0 auto;

			}

			.box .cell {
				float: left;
				box-sizing: border-box;
				border: 1px solid red;
				width: 10px;
				height: 10px;
				position: relative;
			}

			.box .cell .cell-info {
				position: absolute;
				left: 10px;
				width: 200px;
				height: 200px;
				z-index: 999;
				background: green;
			}
		</style>
	</head>
	<body>
		<div class="box" style="clear: both;">
		</div>

	</body>

	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
	<script type="text/javascript">
		window.onload = function() {
			initCell();
			/* 为每一个格子添加鼠标放上事件 */
			$(document).on("click", ".cell", function(){
				$(".cell-info").remove();
				console.log(this)
				$(this).append("<div class=\"cell-info\"><h4>序列号："+$(this).attr("id")+"</h4><p>可以在盒子里面再加一个盒子</p></div>")
			})
		}

		function viewInfo(e) {
			$(e.prototype).append("<div class=\"cell-info\"><h4>姓名：xxx</h4><p>可以在盒子里面再加一个盒子</p></div>")
		}

		function initCell() {
			for (let i = 1; i <= 4000; i++) {
				$(".box").append("<div class=\"cell\" id='cell" + i + "'></div>");
			}
		}
	</script>
</html>
